<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <style>
        html, body {
            background: #fff;
            width: 100%;
            min-width: 1280px;
            overflow-x: auto;
            height: auto;
            min-height: 100vh;
        }
        .main-container {
            background: #fff;
            color: #666;
            font-size: 14px;
            width: 100%;
            min-height: calc(100vh - 50px);
            position: relative;
            overflow: hidden;
            padding-top: 100px;
        }
        .main-container {
            background: #fff;
            color: #666;
            font-size: 14px;
            color: #666;
            font-size: 14px;
            font-weight: 400;
        }
        .wrap {
            padding-bottom: 1px;
            padding-top: 50px;
            width: 1200px;
            margin: 0 auto;
            text-align: center;
        }
        .layout {
            min-height: auto;
            padding: 0 20px;
            width: 500px;
            border-right: 1px solid #03234c;
            display: inline-block;
            background-color: #fff;
            position: relative;
            -webkit-box-sizing: border-box;
        }
        .go-login {
            text-align: center;
        }
        .go-login a {
            color: #03234c;
            outline: 0 none;
            text-decoration: none;
        }
        .main-box {
            text-align: center;
            color: #666;
            font-size: 14px;
        }
        .login_area {
            width: 358px;
            margin: 0 auto;
            padding-bottom: 20px;
            text-align: initial;
        }
        .n_tit_msg {
            padding-top: 0;
            padding-bottom: 15px;
            text-align: center;
            padding: 30px 0;
            font-weight: normal;
            font-size: 20px;
            color: #03234c;
            line-height: 24px;
        }
        .n_tit_msg>* {
            display: inline-block;
            vertical-align: middle;
        }
        .n_tit_msg>img {
            height: 24px;
            width: auto;
            margin-left: 8px;
            display: inline-block;
             vertical-align: middle;
        }
        .login_tabs {
            margin-bottom: 10px;
        }
        .login_tabs h6 {
            cursor: pointer;
            float: left;
            width: 50%;
            text-align: center;
            height: 45px;
            line-height: 45px;
            font-size: 16px;
            font-weight: 600;
            color: #bbb;
            border-bottom: 2px solid #bbb;
        }
        .login_tabs h6.active {
            color: #03234c;
            border-color: #03234c;
        }
        .c_b {
            zoom: 1;
        }
        .login-box{
            width: 358px;
            height: 277px;
        }
        .lgn_inputbg {
            position: relative;
        }
        .login_user {
            display: -webkit-box;
            /* display: box; */
        }
        .labelbox {
            display: block;
            margin-bottom: 14px;
            padding: 0;
            border: 1px solid #e0e0e0;
            position: relative;
            outline: 0 none;
            
        }
        .labelbox .code {
            width: 200px;
            height: 42px;
            line-height: 22px;
            padding: 13px 16px 13px 14px;
            display: block;
            font-size: 100%;
            outline: none;
            float: left;
        }
        .get-code {
            text-decoration: none;
            text-align: center;
            margin-top: 0;
            background-color: #03234c;
            color: #fff;
            border: 0;
            padding: 10px;
            line-height: 29px;
            display: block;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            margin-left: 5px;
            max-width: 130px;
            min-width: 120px;
            position: absolute;
            right: 1px;
            top: 1px;
            border-radius: 0;
            float: left;
        }
        .wrapper input {
            background: none;
            border: 0 none;
        }
        .lgncode {
            padding-bottom: 14px;
            margin: 0;
            padding: 0;
            text-align: initial;
            width: 360px;
            height: 58px;
        }
        .smscode{
            width: 358px;
            height: 72px;
        }
        .code_label {
            width: 100%;
            margin-bottom: 0;
            padding-right: 130px;
            float: left;
        }
        .labelbox {
            display: block;
            margin-bottom: 14px;
            padding: 0;
            border: 1px solid #e0e0e0;
            position: relative;

        }
        .labelbox-smscode{
            width: 358px;
            height: px;
        }
        .code_label .code {
            width: 100%;
        } 
        .labelbox input {
            width: 100%;
            height: 42px;
            line-height: 22px;
            padding: 13px 16px 13px 14px;
            display: block;
        }  
        .wrapper input {
            background: none;
            border: 0 none;
        }
        .lgncode .chkcode_img {
            vertical-align: top;
        }
        .chkcode_img {
            cursor: pointer;
            margin-left: 10px;
            position: absolute;
            top: 0;
            right: 0;
            height: 40px;
            width: auto;
            border: 0;
        }
        .lgncode {
            padding-bottom: 30px;
        }
        .labelbox-smscode {
            /* width: 228px; */
            height: 50px;
            /* padding-right: 130px; */
            display: block;
        }
        .labelbox input {
            width: 100%;
            height: 42px;
            line-height: 22px;
            padding: 13px 16px 13px 14px;
            display: block;
        }
        
        .err_tip {
            margin-bottom: 5px;
            line-height: 20px;
            color: #d71921;
            font-size: 12px;
            display: none;
        }
        .err_tip .dis_box {
            -webkit-box-align: center;
        }
        .dis_box {
            display: -webkit-box !important;
        }
        .err_tip .dis_box .icon_error {
            display: block;
        }
        .icon_error {
            width: 14px;
            height: 14px;
            margin-right: 5px;
            overflow: hidden;
            background-color: #d71921;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -o-border-radius: 50%;
            border-radius: 50%;
            vertical-align: middle;
            font-style: normal;
            font-weight: normal;
        }
        .err_tip {
            margin-bottom: 5px;
            line-height: 20px;
            color: #d71921;
            font-size: 12px;
            display: none;
        }
        .btns_bg {
            padding-top: 10px;
            padding-bottom: 15px;
            width: 358px;
            height: 89px;
            margin: 0;
            padding: 0;
            text-align: initial;
        }
        .wrapper .btnadpt {
            width: 100%;
            height: 50px;
            line-height: 50px;
            display: block;
            margin-bottom: 14px;
            text-align: center;
            font-size: 14px;
            color: #fff;
            cursor: pointer;
            background: #03234c;
        }
        .go-login {
            text-align: center;
            display: block;
        }
        .wrapper .btnadpt {
            width: 100%;
            height: 50px;
            line-height: 50px;
            display: block;
            margin-bottom: 14px;
            text-align: center;
            font-size: 14px;
            color: #fff;
            cursor: pointer;
            background: #03234c;
        }
        .layout-toreg {
            display: inline-block;
            vertical-align: top;
            width: 500px;
            padding: 0 20px;
            height: 100%;
        }
        .toreg-inner {
            text-align: left;
            padding-left: 35px;
            color: #03234c;
            font-size: 14px;
            width: 400px;
            line-height: 20px;
            margin: 0;
            padding: 0;
            height: 600px;
        }
        .toreg-inner h2 {
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 25px;
        }
        .toreg-inner p {
            font-size: 14px;
            color: #999;
            margin-bottom: 10px;
            display: block;
        }
        .toreg-inner ul, .toreg-inner ul li {
            width: 365px;
            height: 40px;
        }
        .toreg-inner ul, .toreg-inner ul li {
            list-style: square;
            width: 365px;
            height: 108px;
        }
        .toreg-inner ul li {
            padding: 8px 0;
            list-style: square;
            display: list-item;
            text-align: -webkit-match-parent;
        }
        
        .toreg-inner .btn-toreg {
            margin-top: 15px;
            width: 100%;
            height: 50px;
            line-height: 50px;
            display: block;
            margin-bottom: 14px;
            text-align: center;
            font-size: 14px;
            color: #fff;
            cursor: pointer;
            background: #03234c;
            outline: 0 none;
        }
        .layout-toreg .toreg-inner ul li p {
            font-size: 18px;
            color: #03234c;
        }
        

    </style>
</head>
<body>
    <div class="main-container J_minicart_close">
        <div id="page-container" class="wrapper">
            <div class="wrap">
                <div id="layout" class="layout">
                    <dic id="login-main" class="main-box">
                        <div class="username_login_box">
                            <div class="login_area">
                                <h5 class="n_tit_msg">
                                    <span>欢迎登录</span>
                                    <img src="/JS-project/src/images/logo.png" alt>
                                </h5>
                                <div class="login_tabs">
                                    
                                    <h6 class>账号密码登录</h6>
                                    <h6 class="active">短信快捷登录/注册</h6>
                                    
                                </div>
                                <form id="login-main-form">
                                    <div class="loginbox c_b">
                                        
                                        <div class="lgn_inputbg c_b">
                                            
                                            <label id="region-code" for class="labelbox login_user c_b">
                                                
                                                <input autocomplete="off" type="text" name="user" id="username" placeholder="手机号码" class="item_account">
                                                
                                            </label>
                                            
                                        </div>
                                        <div id="captcha" class="lgncode c_d" style="display: none;">
                                            <label class="labelbox code_label">
                                                <input id="captcha-code" type="text" maxlength="4" placeholder="请输入图片验证码" class="code">
                                                <img id="captcha-img" src="#" alt="点击可刷新图片验证码" class="chkcode_img">
                                            </label>
                                        </div>

                                        <div id="captcha2" class="lgncode c_d">                                                
                                            <label class="labelbox code_label">
                                                <input id="captcha-code2" type="text" maxlength="4" placeholder="请输入图片验证码" class="code">
                                                <img id="captcha-img2" src="#" alt="点即可刷新验证码" class="chkcode_img">
                                            </label>   
                                        </div>

                                        <div class="lgncode c_b smscode" style> 
                                            <label class="labelbox labelbox-smscode" for>
                                                <input id="verify_m_smscode" type="text" maxlength="6" placeholder="短信验证码" class="code" name="smscode" autocomplete="off">
                                                <a href="#" title="获取验证码" class="verity-sendbtn get-code">获取验证码</a>
                                            </label> 
                                        </div>

                                        <div id="error-outcon" class="err_tip" style="visibility: hidden;">
                                            <div class="dis_box">
                                                <em class="icon_error"></em>
                                                <span class="error-con"></span>
                                            </div>
                                        </div>
                                            <!-- <div id="error-forbidden" class="err_forbidden">您的操作频率过快，请稍后再试。</div> -->
                                        <div class="btns_bg">
                                            <input id="login-button" type="button" value="立即登录" class="btnadpt btn_orange">
                                        </div>
                                        
                                    </div>
                                </form>
                            </div>
                        </div>
                    </dic>
                    <p class="go-login">
                        <a href="#">忘记密码?</a>
                    </p>
                </div>
                <div class="layout-toreg">
                    <div class="toreg-inner">
                        <h2>加入FILA V.I.P</h2>
                        <p>注册成为会员并完善个人信息，即可享受 ：</p>
                        <ul>
                            <li>
                                <p>"积分可在官网购物时作为现金抵扣；"</p>
                            </li>
                            <li>
                                <p>"官网、门店消费共享会员权益和积分累计"</p>
                            </li>
                            <li>
                                <p>"即时收到优惠及新品发布信息，品牌活动邀约"</p>
                            </li>
                            <a href="#" title="立即注册" class="btn-toreg">立即注册</a>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>